<template>
    <el-row class="OLrow1"  type="flex" justify="center">
        <el-col :span="11" class="OLdiv1col1">
            <el-row class="OLrow2"  type="flex" justify="left"
            v-for="(datalist,index) in MyOrderData" :key="index"
            :style="index+1 == MyOrderData.length?'border-bottom:0px':''">
                <img :src="imgshow[index]" class="PImg" @click="GoBackProductDetail(datalist.pid)">
                <div class="OLcol1div1" style="width: 210px;">
                    <span :title="datalist.title"
                    style="cursor:pointer" @click="GoBackProductDetail(datalist.pid)"
                    >{{datalist.title}}</span>
                </div>
                <div class="OLcol1div1" style="margin-top:46px">
                    <span style="color: rgb(131, 131, 131);">标配：{{datalist.title.slice(2,15)}}</span>
                </div>
                <div class="OLcol1div1" style="margin-top:36px;margin-left:330px">
                    <span>×{{datalist.num}}</span>
                </div>
            </el-row>
        </el-col>
        <el-col :span="4" class="OLdiv1col1">
            <div class="OLcol1div2" :style="weizhi">
                <span class="div2span1">{{TotalPrice}}.00</span>
                <span class="div2span2">在线</span>
            </div>
        </el-col>
        <el-col :span="3" class="OLdiv1col1">
            <div class="OLcol1div2" :style="weizhi">
                <span :style="Status==0?'color: rgb(131, 131, 131);':'color: rgb(91, 91, 91);'">
                    {{Status==0?cancel:notcancel}}</span>
                <span class="div2span3" :style="DetailsStyle"
                @mouseover="MOOrderspan1()" @mouseleave="MLOrderspan1()"
                @click="GoOrderDetails(odata[0].oid)"
                >订单详情</span>
            </div>
        </el-col>
        <el-col :span="3" class="OLdiv1col1"></el-col>
        <el-col :span="3" class="OLdiv1col1" style="border-right: 1px solid rgb(221, 221, 221);">
            <div class="deletebtndiv" :style="weizhi2">
                <span class="deletebtn" :style="DeleteStyle"
                @mouseover="MOOrderspan2()" @mouseleave="MLOrderspan2()"
                @click="DeleteByOid(odata[0].oid)"
                >删除订单</span>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import axios from 'axios'
    export default {
        name:'XiaoOLProduct',
        props:{
            odata:[{'image':''},{'image':''}]
        },
        data(){
            return{
                DetailsStyle:'',
                DeleteStyle:'',
                MyOrderData:[],
                imgshow:[],
                weizhi:'',
                weizhi2:'',
                TotalPrice:'',
                Status:99,
                cancel:'已取消',
                notcancel:'已支付',
            }
        },
        methods:{
            MOOrderspan1(){
                this.DetailsStyle='color: rgb(255, 96, 131);'
            },
            MLOrderspan1(){
                this.DetailsStyle=''
            },
            MOOrderspan2(){
                this.DeleteStyle='color: rgb(255, 96, 131);'
            },
            MLOrderspan2(){
                this.DeleteStyle=''
            },
            GoBackProductDetail(pid){
                this.$router.push({
                    name:'xProductDetails',
                    params:{id:pid}})
            },
            GoOrderDetails(oid){
                if( this.MyOrderData != ''){
                    this.$router.push({
                        name:'xOrderDetail',
                        params:{oid:oid}})
                }
            },
            DeleteByOid(oid){
                this.$confirm('此操作将永久删除该订单信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                this.$addr.get(`orders/${oid}/delete`).then(
                    response=>{
                        console.log('请求删除订单信息成功',response)
                        this.$bus.$emit('RefreshPage',0)
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    },
                    error=>{
                        console.log('请求删除订单信息失败',error.message)
                    }
                )
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },

        },
        mounted(){
            setTimeout(() => {
                this.MyOrderData=this.odata
                this.weizhi=25+47*(this.odata.length-1)
                this.weizhi2=36+47*(this.odata.length-1)
                this.weizhi=`margin-top:${this.weizhi}px`
                this.weizhi2=`margin-top:${this.weizhi2}px`
                console.log(this.MyOrderData,'&&&&datalist');
                // this.imgshow=require(`../../assets/portal/16LenovoYOGA900red/5.jpg`)
                for( let i=0 ; i<this.MyOrderData.length ; i++){
                    this.imgshow[i]=require(`../../assets/${this.MyOrderData[i].image.slice(13)}1.jpg`)
                }
                this.TotalPrice=this.odata[0].totalPrice
                this.Status=this.odata[0].status
            }, 300);

        },
    }
</script>

<style scoped>
.OLrow1{
    margin: 0px auto;
    max-width: 1000px;
    text-align: center;
    font-size: 12px;
    height: 100%;
}
.OLrow2{
    height: 90px;
    border-bottom: 1px solid rgb(221, 221, 221);
}
.OLdiv1col1{
    /* border-top: 1px solid rgb(221, 221, 221); */
    border-bottom: 1px solid rgb(221, 221, 221);
    border-left: 1px solid rgb(221, 221, 221);
}
.PImg{
    margin-top: 18px;
    margin-left: 30px;
    float: left;
    width: 50px;
    height: 50px;
    cursor: pointer;
}
.OLcol1div1{
    margin-left: 95px;
    margin-top: 28px;
    position: absolute;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.OLcol1div2{
    margin-top: 25px;
}
.div2span1{
    font-weight: 550;
    font-size: 13px;
}
.div2span2{
    position: absolute;
    margin-left: -40px;
    margin-top: 19px;
    color: rgb(131, 131, 131);
}
.div2span3{
    cursor: pointer;
    position: absolute;
    margin-top: 19px;
    margin-left:-42px;
}
.deletebtndiv{
    margin-top:36px;
}
.deletebtn{
    cursor: pointer;
}
</style>